<template>
	<view :style="{ height: conentHeight + 'px;' }">
		<view class="top-height">
			<view class="page-top-box">
				<view class="search-box flex ac">
					<u-search
						borderColor="#DADADA"
						bgColor="#ffffff"
						placeholder="搜索项目名称"
						v-model="searchForm.project_name"
						:showAction="false"
						@search="searchFunc"
						@clear="searchFunc"
					></u-search>
					<view class="search-btn flex ac" @click="searchShow = true" :style="searchShow ? 'color:#3B75FF;' : ''">
						筛选
						<text class="iconfont icon-shaixuan" :style="searchShow ? 'color:#3B75FF;' : ''"></text>
					</view>
					<u-button
						@click="toAdd"
						v-if="$isPer(per_arr, ['increaseDecreaseItems_add'])"
						customStyle="width: auto;height: 64rpx;background: #3B75FF;border-radius: 32rpx;border-color:#F8F8FA;font-weight: 400;font-size: 26rpx;color: #ffffff;margin-left:20rpx;padding: 0 20rpx"
						:hairline="false"
						text="新增增减项"
					></u-button>
				</view>
			</view>
		</view>
		<view class="list-content-box" :style="{ height: 'calc(100% - ' + topHeight + 'px);' }">
			<z-paging
				ref="paging"
				:fixed="false"
				v-model="dataList"
				@query="queryList"
				@onRefresh="refresh"
				:paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }"
			>
				<template slot="empty">
					<u-empty icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
				</template>
				<view class="list-items flex ac flex-wrap" :key="index" v-for="(item, index) in dataList" @click.stop="navToDetailFunc(item, index)">
					<view class="list-items-title flex ac jb" v-if="$fieldShowFunc('zjx_xmmc')">
						<view class="title u-line-1">{{ item.project_name }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('zjx_xmlx')">
						<view class="title">项目类型</view>
						<view class="desc u-line-1">{{ item.store_type_name }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('zjx_zjlx')">
						<view class="title">增减类型</view>
						<view class="desc u-line-1">{{ item.increase_or_decrease == 1 ? '增项' : '减项' }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('zjx_zjnr')">
						<view class="title">增减内容</view>
						<view class="desc u-line-1">{{ item.change_content }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('zjx_cbje')">
						<view class="title">成本金额</view>
						<view class="desc u-line-1">
							{{ item.cost_amount ? `${item.increase_or_decrease == 1 ? '' : '-'}${item.cost_amount}元` : '--' }}
						</view>
					</view>
					<view class="list-items-item flex ac" v-if="$fieldShowFunc('zjx_sgnrsm')">
						<view class="title">施工内容说明</view>
						<view class="desc u-line-1">{{ item.construction_content || '--' }}</view>
					</view>

					<!-- 按钮 -->
					<view style="width: 100%">
						<judgeBtn plain :per_arr="per_arr" :btns="btns" :state="item.change_status" :item="item" :idx="index" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
		</view>
		<!-- 筛选弹窗 -->
		<u-popup :show="searchShow" round="30" @close="searchShow = false" closeable>
			<view class="search-popup-title">全部筛选</view>
			<scroll-view scroll-y class="search-popup-box">
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>增减类型</text>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view
							@click="searchSelectFunc('increase_or_decrease', item)"
							:class="searchForm.increase_or_decrease == item.value ? 'search-items-list-item-active' : ''"
							class="search-items-list-item"
							hover-class="hover-class"
							v-for="(item, index) in searchListObj.increase_or_decrease.list"
							:key="index"
						>
							{{ item.label }}
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title">增减内容</view>
					<u--input placeholder="增减内容" border="surround" v-model="searchForm.change_content"></u--input>
				</view>
				<view class="search-items">
					<view class="search-items-title">施工内容说明</view>
					<u--input placeholder="施工内容说明" border="surround" v-model="searchForm.construction_content"></u--input>
				</view>
				<view class="search-items">
					<view class="search-items-title">增减项原因</view>
					<u--input placeholder="增减项原因" border="surround" v-model="searchForm.reason_type"></u--input>
				</view>
			</scroll-view>
			<view class="btn-box flex ac jb">
				<u-button
					@click="reSearchValFunc"
					text="重置"
					customStyle="width: 248rpx;height: 82rpx;background: #242834;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
				<u-button
					@click="searchFunc"
					text="查询"
					customStyle="width: 422rpx;height: 82rpx;background: #3B75FF;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
			</view>
		</u-popup>

		<increaseDecreaseItems :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></increaseDecreaseItems>
	</view>
</template>

<script>
export default {
	name: '',
	props: {
		conentHeight: {
			default: 0
		},
		option: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			per_arr: [],
			btns: [
				{
					per_name: 'projects_changeItemsAssignCostEstimator',
					state: 10,
					name: '修改负责人'
				},
				{
					per_name: 'increaseDecreaseItems_shbjd1',
					state: 20,
					name: '报价单审核'
				},
				{
					per_name: 'increaseDecreaseItems_shbjd2',
					state: 30,
					name: '报价单复审'
				},
				{
					per_name: 'increaseDecreaseItems_shbjd3',
					state: 40,
					name: '报价单三审'
				},
				{
					per_name: 'projects_changeInvalidation',
					state: 0,
					name: '作废'
				}
			],
			searchShow: false,
			dataList: [],
			searchForm: {
				project_name: '',
				increase_or_decrease: '',
				change_content: '',
				construction_content: '',
				reason_type: ''
			},
			topHeight: 0,
			searchListObj: {
				increase_or_decrease: {
					list: [
						{
							label: '增项',
							value: 1
						},
						{
							label: '减项',
							value: 2
						}
					],
					page: 1,
					num: 5,
					max: 0
				}
			},
			oper_item: {},
			per_name: '',
			oper_idx: ''
		};
	},
	mounted() {
		this.getHeight();
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/increaseDecreaseItemsList'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	watch: {},
	methods: {
		refresh() {
			this.dataList = [];
		},
		// 重置弹窗筛选项
		reSearchValFunc() {
			this.searchForm = {
				project_name: '',
				increase_or_decrease: '',
				change_content: '',
				construction_content: '',
				reason_type: ''
			};
			this.$nextTick(() => {
				this.searchFunc();
			});
		},
		// 刷新列表
		searchFunc() {
			this.$refs.paging.reload();
			this.searchShow = false;
		},
		getHeight() {
			// 创建节点查询
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			const query = uni.createSelectorQuery().in(that);
			query.select('.top-height').boundingClientRect();
			query.exec((res) => {
				that.topHeight = res[0].height + systemInfo.statusBarHeight + 20;
			});
		},
		// 去详情
		navToDetailFunc(item, index) {
			this.oper_idx = index;
			uni.navigateTo({
				url: '/pagesB/increaseDecreaseItemsDetail/increaseDecreaseItemsDetail?id=' + item.id
			});
		},
		queryList(page, num) {
			this.getChangeList(page, num);
		},
		// 增减项列表
		getChangeList(page, num) {
			let searchForm = this.searchForm;
			this.$Apipc
				.getChangeList({
					page,
					num,
					project_name: searchForm.project_name,
					increase_or_decrease: searchForm.increase_or_decrease,
					change_content: searchForm.change_content,
					construction_content: searchForm.construction_content,
					reason_type: searchForm.reason_type
				})
				.then((res) => {
					console.log(res, '增减项列表');
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.list);
					}
				});
		},
		// 弹窗筛选项
		searchSelectFunc(type, item) {
			switch (type) {
				case 'increase_or_decrease':
					this.searchForm[type] = this.searchForm[type] == item.value ? '' : item.value;
					break;
				default:
			}
		},
		// 添加
		toAdd() {
			uni.navigateTo({
				url: '/pagesC/increaseDecreaseItems/add/add'
			});
		},
		// 操作按钮触发点击
		btnsChange(e) {
			console.log(e, 'xxxsww');

			this.oper_item = e.item;
			this.oper_idx = e.index;
			switch (e.per_name) {
				// 修改负责人
				case 'projects_changeItemsAssignCostEstimator':
					this.per_name = e.per_name;
					break;
				// 作废
				case 'projects_changeInvalidation':
					this.per_name = e.per_name;
					break;
				// 审核操作
				default:
					uni.navigateTo({
						url: '/pagesB/increaseDecreaseItemsDetail/increaseDecreaseItemsDetail?id=' + e.item.id
					});
					break;
			}
		},

		handleSubmit() {
			if (this.per_name == 'projects_changeInvalidation') {
				this.dataList.splice(this.oper_idx, 1);
			} else {
				this.updateListIdx();
			}
		},

		updateListIdx() {
			console.log('来了 老弟');
			let idx = this.oper_idx.toString();
			if (idx) {
				let item = this.dataList[idx];
				this.$Apipc
					.getChangeDetails({
						change_id: item.id
					})
					.then((res) => {
						console.log(res, '增减项详情');
						if (res.code == 200) {
							let info = res.data;
							this.dataList[idx] = res.data;
							this.dataList.splice(0, 0);
						}
					});
			}
		}
	}
};
</script>

<style lang="scss"></style>
